/**
 * @class Ext.field.Checkbox
 */

.x-field-checkbox .x-field-mask,
.x-field-radio .x-field-mask {
  @include absolute-position;

  &::before {
    content: '';
    background: url("../images/hiddenpassword.png") no-repeat;
    background-size: 100%;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 4px;
    right: 3px;
  }
  /*  &::after {
        content: '';
        width: 30px;
        height: 30px;
        position: absolute;
        top: 8px;
        right: 5px;
        border: 1px solid #B9B7B9;
        @include border-radius(4px);
        @include background(linear-gradient(color-stops(#FFFFFF, #DEDFDE)));
        border: 2px solid #fff;
        background-color: $input-color;
        @include border-radius(30px);
        @include box-shadow(1px 1px 1px #ccc);
        font-family: 'Pictos';
        font-size: 1.3em;
        text-align: center;
        line-height: 1.4em;
        color: #fff;
    }*/
}

.x-input-checkbox,
.x-input-radio {
  visibility: hidden;
}

.x-input-checkbox:checked ~ .x-field-mask:after {
  content: '';
  background: url("../images/showpassword.png") no-repeat;
  background-size: 100%;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 4px;
  right: 3px;
}
